---
# title: "Divide Color"
title: "分割线颜色"
# description: "Utilities for controlling the border color between elements."
description: "用于控制元素之间边框颜色的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/divideColor'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'
import { Heading } from '@/components/Heading'

export const classes = {
  plugin,
  transformSelector: (selector) => (
    <>
      {selector.split('>').shift().trim().replace(/^\./, '').replace(/\\/g, '')} <span className="ml-1 text-purple-300">> * + *</span>
    </>
  ),
  preview: (css, { className }) => (
    <td className={`relative w-20 p-2 ${className}`}>
      <div className="absolute inset-0 flex flex-col m-2">
        <div className="flex-1" />
        <div
          className="flex-1 border-t"
          style={{
            borderColor: Array.isArray(css['border-color'])
              ? css['border-color'][0].replace('var(--divide-opacity)', '1')
              : css['border-color'].replace('var(--divide-opacity)', '1'),
          }}
        />
      </div>
    </td>
  ),
}

<!-- ## Usage -->
## 使用

<!-- Control the border color between elements using the `divide-{color}` utilities. -->
使用 `divide-{color}` 功能控制元素之间的边框颜色。

```html fuchsia
<template preview>
  <div class="divide-y divide-fuchsia-300">
    <div class="text-center font-extrabold text-2xl text-fuchsia-600 py-3">1</div>
    <div class="text-center font-extrabold text-2xl text-fuchsia-600 py-3">2</div>
    <div class="text-center font-extrabold text-2xl text-fuchsia-600 py-3">3</div>
  </div>
</template>

<div class="**divide-y divide-fuchsia-300**">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

<!-- ### Changing opacity -->
### 改变不透明度

<!-- Control the opacity of borders between elements using the `divide-opacity-{amount}` utilities. -->
使用 `divide-opacity-{amount}` 功能控制元素之间边框的不透明度。

```html lightBlue
<template preview>
  <div class="divide-y-4 divide-black divide-opacity-25">
    <div class="text-center font-extrabold text-2xl text-light-blue-600 py-3">1</div>
    <div class="text-center font-extrabold text-2xl text-light-blue-600 py-3">2</div>
    <div class="text-center font-extrabold text-2xl text-light-blue-600 py-3">3</div>
  </div>
</template>

<div class="divide-y-4 **divide-black divide-opacity-25**">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

<!-- Learn more in the [divide opacity documentation](/docs/divide-opacity). -->
在[ divide opacity 文档](/docs/divide-opacity)中了解更多。

---

<!-- ## Responsive -->
## 响应式

<!-- To control the borders between elements at a specific breakpoint, add a `{screen}:` prefix to any existing divide utility. For example, adding the class `md:divide-x-8` to an element would apply the `divide-x-8` utility at medium screen sizes and above. -->
要在特定的断点处控制元素之间的边界，可在任何现有的 divide 功能中添加 `{screen}:` 前缀。例如，在元素中添加 `md:divide-x-8` 类，就可以在中等尺寸以上的屏幕上使用 `divide-x-8` 功能。

```html
<div class="divide-y divide-teal-400 **md:divide-pink-400**">
  <div class="py-2">1</div>
  <div class="py-2">2</div>
  <div class="py-2">3</div>
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看[响应式设计](/docs/responsive-design)文档。

---

<!-- ## Customizing -->
## 自定义

### 边框颜色

<!-- By default Tailwind makes the entire [default color palette](/docs/customizing-colors#default-color-palette) available as divide colors. -->
默认情况下，Tailwind 将整个[默认调色板](/docs/customizing-colors#default-color-palette)作为 divide 颜色。

<!-- You can [customize your color palette](/docs/colors#customizing) by editing the `theme.colors` section of your `tailwind.config.js` file, customize just your border and divide colors together using the `theme.borderColor` section, or customize only the divide colors using the `theme.divideColor` section. -->

您可以通过编辑 `tailwind.config.js` 文件中的 `theme.colors#customizing` 部分来[自定义您的调色板](/docs/customizing-colors#-2)，使用 `theme.borderColor` 部分只自定义边框颜色和 divide 颜色，或者使用 `theme.divideColor` 部分只自定义 divide 颜色。


```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      divideColor: theme => ({
-       ...theme('borderColors'),
+       'primary': '#3490dc',
+       'secondary': '#ffed4a',
+       'danger': '#e3342f',
      })
    }
  }
```

<!-- ### Variants -->
### 变体

<Variants plugin="divideColor" />

<!-- ### Disabling -->
### 禁用

<Disabling plugin="divideColor" />
